<template>
	<cxView :background="background" :height="heightValue" left="0" right="0" :position="position" :bottom="bottom"
		:padding="padding" :margin="margin" :zIndex="zIndex">
		<cxView :height="btnHeight" :background="btnBg" :color="color" @confirm="confirm" :showCircula="showCircula"
			:borderRadius="borderRadius" text-align="center" display="flex" align-items="center"
			:justifyContent="justifyContent">
			{{title}}
			<slot></slot>
		</cxView>

	</cxView>
</template>

<script>
	/**
	 * cxBottom 
	 * @property {String} background transparent rgba(0, 0, 0, 0) 透明色

	 * @property {String} justifyContent  flex-start | flex-end | center | space-between | space-around 
	
	 */
	export default {
		name: "cxBottom",
		data() {
			return {
				// height: uni.$cx.cxBottomSafeHeight() + 80,
				heightValue: null

			};
		},
		mounted() {
			this.heightValue = 0.0
			let arr = uni.$cx.cxGetMarginArr(this.padding);
			if (this.showSafeArea) {
				this.heightValue = uni.$cx.cxBottomSafeHeight() + parseFloat(this.btnHeight) + parseFloat(arr[0]) +
					parseFloat(
						arr[2]);
			} else {
				this.heightValue = parseFloat(this.btnHeight) + parseFloat(arr[0]) + parseFloat(arr[2]);
			}





		},
		computed: {
			heightCompute() {
				let height = 0.0;

				let arr = uni.$cx.cxGetMarginArr(this.padding);
				if (this.showSafeArea) {
					height = uni.$cx.cxBottomSafeHeight() + parseFloat(this.btnHeight) + parseFloat(arr[0]) + parseFloat(
						arr[2]);
				} else {
					height = parseFloat(this.btnHeight) + parseFloat(arr[0]) + parseFloat(arr[2]);
				}
				return height
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			background: {
				type: String,
				default: 'white'
			},
			position: {
				type: String,
				default: 'fixed'
			},
			bottom: {
				type: [Number, String],
				default: 0
			},
			padding: {
				type: String,
				default: '10 20 0 20'
			},
			margin: {
				type: String,
				default: ''
			},
			btnBg: {
				type: String,
				default: '#187afa'
			},
			btnHeight: {
				type: String,
				default: '80'
			},
			color: {
				type: String,
				default: 'white'
			},
			showCircula: {
				type: Boolean,
				default: false
			},
			borderRadius: {
				type: [String, Number],
				default: '20'
			},

			border: {
				type: Boolean,
				default: false
			},
			showSafeArea: {
				type: Boolean,
				default: true
			},
			justifyContent: {
				type: String,
				default: "center"
			},
			zIndex: {
				type: [String, Number],
				default: 99
			}

		},
		methods: {
			confirm() {
				this.$emit("confirm");
			}
		}
	}
</script>

<style>

</style>